class Text extends HTMLElement {
  static get observedAttributes() {
    return ["text", "textstyle"];
  }

  constructor() {
    super();
    const shadow = this.attachShadow({ mode: "open" });

    const style = document.createElement("link");
    style.setAttribute("rel", "stylesheet");
    style.setAttribute(
      "href",
      "./src/mp-design-tokens/components-styles/Text.css"
    );
    shadow.appendChild(style);

    this.contentSpan = document.createElement("span");
    shadow.appendChild(this.contentSpan);
  }

  attributeChangedCallback(name, oldValue, newValue) {
    this.render();
  }

  render() {
    const text = this.getAttribute("text") || "";
    const textStyle = this.getAttribute("textstyle") || "body1";
    const className = `mp-text-${textStyle}`;

    this.contentSpan.className = className;
    this.contentSpan.textContent = text;
  }
}

customElements.define("mp-text", Text);
